·
<template>
  <open-modal class="c-pz10000 modal-class" :openModal="showCombo" @closeModal="closeCombo">
    <div class="c-bg-white c-pt26 c-pb32 c-ph24 c-br-tr16 c-br-tl16">
      <div>
        <my-small-tabbar :tabList="tabList" tabHeight="60" :isScroll="true" :fontSet="{ defaultColor: 'c-fc-sblack', activeColor: 'c-fw600 c-active' }" tabColorRGB="0,140,255" :tabIndex="tabIndex" @changeTab="clickChangeTab"></my-small-tabbar>
      </div>
      <div class="c-maxh660 c-maxh560 c-content-scroll" id="scrollrelated" @scroll="onMemberScroll">
        <template>
          <div class="c-flex-row c-pt20 c-pb20" @click="clickProduct(item)" v-for="(item, index) in relatedList" :key="index">
            <div class="c-ww210 c-hh140 c-text-hidden c-p">
              <img class="c-w100 imgCloseBig c-br8" :src="$addXossFilter(item.cover, require('../../../assets/defult270.png'))" alt=""/>
              <img v-if="item.payType == 2 && item.svipDiscount == 0 && item.vipDiscount != 0" src="@/assets/i/wap/course/svipfree5.png" alt="" class="c-pa c-p-t0 c-p-l0 c-ww60 c-pz1" />
              <img v-else-if="item.payType == 2 && item.vipDiscount == 0" src="@/assets/i/wap/course/vipfree5.png" alt="" class="c-pa c-p-t0 c-p-l0 c-ww60 c-pz1" />
            </div>
            <div class="c-flex-column c-pl20 c-flex-grow1 c-w0 c-pv4 c-justify-sb">
              <div class="c-fs24 c-text-ellipsis2">{{ item.name }}</div>
              <div class="c-flex-row c-aligni-center c-justify-sb">
                <template v-if="(tabIndex != 1 && tabIndex != 2 && tabIndex != 3)
                  || (tabIndex == 1 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(61))))
                  || (tabIndex == 2 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(9))))
                  || (tabIndex == 3 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(78))))"
                >
                  <div class="c-fs20 c-fc-gray" v-if="tabIndex == 3">{{ item.people }}人报名</div>
                  <div class="c-fs20 c-fc-gray" v-else-if="item.price && item.payType == 2">{{ item.sales | formatNumber }}人已{{ $isWxAppIos() ? '观看' : '购买' }}</div>
                  <div class="c-fs20 c-fc-gray" v-else>{{ (item.visits ? item.visits : item.clicks) | formatNumber }}人观看</div>
                </template>
                <span v-if="item.isSaleOnly == 0 && item.isSaleTogether == 1" class="theme-fc c-fs24">关联售卖</span>
                <div v-else class="theme-fc c-fs24">
                  <span v-if="item.price && item.payType == 2" class="c-fs18">{{ '￥' | iosPriceFilter }}</span>
                  <span>{{ item.payType | priceValueFilter(item.price, 61) }}</span>
                </div>
              </div>
            </div>
          </div>
          <loading-status-tem :dataStatus="dataStatus" noDataText="暂无关联产品"></loading-status-tem>
        </template>
      </div>
    </div>
  </open-modal>
</template>
<script>
import OpenModal from '@/components/templates/common/openModal.vue';
import loadingStatusTem from '@/components/templates/common/loadingStatusTem.vue';
import { utilJs } from '@/utils/common.js';
import MySmallTabbar from '@/components/templates/common/MySmallTabbar.vue';
const LIMIT = 10;
let page = 1;
export default {
  name: 'RelatedCombo',
  components: {
    OpenModal,
    loadingStatusTem,
    MySmallTabbar
  },
  props: {
    showCombo: {
      type: Boolean,
      default: false
    },
    packageMore: {
      type: Boolean,
      default: false
    },
    columnMore: {
      type: Boolean,
      default: false
    },
    trainingMore: {
      type: Boolean,
      default: false
    },
    showTop: {
      type: Boolean,
      default: true
    },
    showType: {
      type: Number,
      default: 0 //0：都展示 1：展示专栏 2：展示知识套餐, 3:训练营
    },
    liveId: {
      type: Number,
      default: 0
    },
    isPersonal: {
      type: Number,
      default: 0
    }
  },
  watch: {
    showCombo(val) {
      if (val) {
        this.getTab();
      }
    }
  },
  data() {
    return {
      tabList: [],
      tabIndex: 1,
      packageList: [],
      relatedList: [],
      dataStatus: 'HAS_MORE_DATA',
      enableShowModuleView: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableShowModuleView : 1,
      enableHiddenModules: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableHiddenModules : [],
    };
  },
  methods: {
    closeCombo() {
      this.$emit('closeCombo');
    },
    getMore(type) {
      this.$emit('getMore', type);
    },
    getTab() {
      let that = this;
      that.tabList = [];
      let getTaIsPersonal = this.isPersonal == 1 ? 15 : 8;
      utilJs.getMethod(global.apiurl + 'combos/relatedProductCount?prodId=' + this.liveId + '&prodType=' + getTaIsPersonal, function(res) {
        // comboCount//知识付费套餐
        // columnCount//专栏
        // trainingTermCount//训练营
        // goodCount//商品
        // circleCount//圈子
        // tab类型：1-知识付费套餐；2-专栏；3-训练营；4-商品；5-圈子
        if (res.comboCount) {
          that.tabList.push({
            title: '相关知识套餐',
            index: 1
          });
        }
        if (res.columnCount) {
          that.tabList.push({
            title: '相关专栏',
            index: 2
          });
        }
        if (res.trainingTermCount) {
          that.tabList.push({
            title: '相关训练营',
            index: 3
          });
        }
        if (res.goodCount) {
          that.tabList.push({
            title: '相关商品',
            index: 4
          });
        }
        if (res.circleCount) {
          that.tabList.push({
            title: '相关圈子',
            index: 5
          });
        }
        if (res.goodCount == 0 && res.circleCount == 0 && res.comboCount == 0 && res.columnCount == 0 && res.trainingTermCount == 0) {
          that.tabList.push({
            title: '购买课程',
            index: 6
          });
        }
        that.tabIndex = that.tabList[0].index;
        console.log(that.tabIndex, that.tabList);
        page = 1;
        that.dataStatus = 'HAS_MORE_DATA';
        that.relatedList = [];
        that.relatedProduct();
      });
    },
    clickChangeTab(index) {
      this.tabIndex = index;
      page = 1;
      this.dataStatus = 'HAS_MORE_DATA';
      this.relatedList = [];
      this.relatedProduct();
    },
    relatedProduct() {
      // /api/combos/relatedProduct?tabType=1&prodId=19407&prodType=8&fromApp=oa
      let that = this;
      if (that.dataStatus == 'LOADING') {
        return;
      }
      that.dataStatus = 'LOADING';
      let getTaIsPersonal = this.isPersonal == 1 ? 15 : 8;
      let getUrl = `${global.apiurl}combos/relatedProduct?tabType=${this.tabIndex}&prodId=${this.liveId}&prodType=${getTaIsPersonal}&limit=${LIMIT}&page=${page}`;
      utilJs.getMethod(
        getUrl,
        res => {
          console.log(res.list.data);
          if (page == 1) {
            that.relatedList = res.list.data || [];
          } else {
            that.relatedList = [...that.relatedList, ...res.list.data];
          }
          if (that.relatedList.length == 0) {
            that.dataStatus = 'NO_DATA'
          } else if (res.list.data && res.list.data.length < LIMIT) {
            that.dataStatus = page == 1 && res.list.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
          } else {
            that.dataStatus = 'HAS_MORE_DATA';
            page++;
          }
        },
        failRes => {
          that.dataStatus = 'DATA_ERROR';
        }
      );
    },
    onMemberScroll() {
      let domScroll = document.getElementById('scrollrelated');
      if (this.checkScrollBottom(domScroll) && this.dataStatus == 'HAS_MORE_DATA') {
        this.relatedProduct();
      }
    },
    //是否滚到底部
    checkScrollBottom(curDom) {
      if (curDom.scrollTop + curDom.clientHeight >= curDom.scrollHeight - 5) {
        return true;
      } else {
        return false;
      }
    },
    clickProduct(item) {
      // tab类型：1-知识付费套餐；2-专栏；3-训练营；4-商品；5-圈子
      let distribution = this.distributionId ? `&distribution=1` : '';
      let toPath = '';
      this.closeCombo()
      if (this.tabIndex == 1) {
        toPath = `/homePage/package/packageDetail?combosId=${item.cId}${distribution}`;
      } else if (this.tabIndex == 2) {
        toPath = `/homePage/column/columnDetail?cId=-1&ckFrom=${global.ckFrom.column}&extId=${item.columnId}${distribution}`;
      } else if (this.tabIndex == 3) {
        toPath = `/homePage/camp/campDetail?campId=${item.ttId}`;
      } else if (this.tabIndex == 5) {
        toPath = `/homePage/circle/circleFeed?id=${item.id}`;
      }
      this.iosAppRouteChange(toPath);
    },
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        };
        window.androidWechatRoute.doAction(JSON.stringify(data));
      } else {
        this.$routerGo(this, 'push', { path: toPath });
      }
    }
  },
  activated() {}
};
</script>

<style scoped>
.modal-class {
  position: fixed !important;
  z-index: 100000 !important;
}
</style>
